<template>
  <div>
    <a-card title="考试通报发布" :bordered="false">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="status" slot-scope="status">
          <a-tag :color="status === '已发布' ? 'green' : 'orange'">
            {{ status }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-if="record.status === '待审核'" @click="handleReview(record)">审核</a>
          <a v-if="record.status === '已审核'" @click="handlePublish(record)">发布</a>
          <a-divider type="vertical" />
          <a @click="handleView(record)">查看</a>
        </span>
      </a-table>
    </a-card>

    <a-modal
      title="考试通报详情"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      :footer="null"
      width="70%"
    >
      <div v-if="currentRecord">
        <h3>{{ currentRecord.examName }}</h3>
        <p>考试时间: {{ currentRecord.examTime }}</p>
        <p>考场: {{ currentRecord.roomNo }}</p>
        
        <a-divider>缺考情况</a-divider>
        <pre>{{ currentRecord.absentInfo }}</pre>
        
        <a-divider>舞弊情况</a-divider>
        <pre>{{ currentRecord.cheatInfo }}</pre>
        
        <a-divider>其他情况</a-divider>
        <pre>{{ currentRecord.otherInfo }}</pre>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '通报编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '考试名称',
    dataIndex: 'examName',
    key: 'examName'
  },
  {
    title: '考试时间',
    dataIndex: 'examTime',
    key: 'examTime'
  },
  {
    title: '考场',
    dataIndex: 'roomNo',
    key: 'roomNo'
  },
  {
    title: '提交人',
    dataIndex: 'submitter',
    key: 'submitter'
  },
  {
    title: '提交时间',
    dataIndex: 'submitTime',
    key: 'submitTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    id: 'TB2023001',
    examName: '高等数学（上）	期末考试',
    examTime: '2024-06-10 09:00-11:00',
    roomNo: '1号教学楼201',
    submitter: '王芳',
    submitTime: '2024-06-10 11:30',
    status: '已发布',
    absentInfo: '20230101 刘洋\n20230102 赵宇',
    cheatInfo: '20230103 周婷 携带小抄',
    otherInfo: '考试秩序良好'
  },
  {
    id: 'TB2023002',
    examName: 'PLC与工业控制技术期末考试',
    examTime: '2024-06-12 14:00-16:00',
    roomNo: '第二教学楼305',
    submitter: '李廷',
    submitTime: '2024-06-12 16:30',
    status: '已审核',
    absentInfo: '20230201 赵六',
    cheatInfo: '无',
    otherInfo: '无'
  },
  {
    id: 'TB2023003',
    examName: '计算机基础期末考试',
    examTime: '2024-06-15 09:00-11:00',
    roomNo: '信息楼101',
    submitter: '王雪',
    submitTime: '2024-06-15 11:20',
    status: '待审核',
    absentInfo: '无',
    cheatInfo: '无',
    otherInfo: '无'
  }
]

export default {
  data() {
    return {
      data,
      columns,
      loading: false,
      pagination: {
        pageSize: 10
      },
      modalVisible: false,
      currentRecord: null
    }
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter)
    },
    handleReview(record) {
      this.$confirm({
        title: '确认审核通过?',
        content: '确定要通过这条考试通报的审核吗?',
        onOk: () => {
          record.status = '已审核'
          this.$message.success('审核通过')
        }
      })
    },
    handlePublish(record) {
      this.$confirm({
        title: '确认发布?',
        content: '确定要发布这条考试通报吗?',
        onOk: () => {
          record.status = '已发布'
          this.$message.success('发布成功')
        }
      })
    },
    handleView(record) {
      this.currentRecord = record
      this.modalVisible = true
    },
    handleModalOk() {
      this.modalVisible = false
    },
    handleModalCancel() {
      this.modalVisible = false
    }
  }
}
</script>